<template>
	<div class="lesson-content">
		<div class="notice-types">
			<div class="types-item">类型</div>
			<div class="types-item" :class="{'type-active': activeTag == item.recId}" v-for="item in tags"
				@click="tagClick('activeTag',item.recId )">{{item.tagName}}
			</div>
		</div>
		<div class="notice-types">
			<div class="types-item">方向</div>
			<div class="types-item" :class="{'type-active': tagId == item.dictValue}" v-for="item in directions"
				@click="tagClick('tagId',item.dictValue )">{{item.dictLabel}}
			</div>
		</div>
		<div class="notice-types last-types">
			<div class="types-item">难度</div>
			<div class="types-item" :class="{'type-active': difficulty == item.val}" v-for="item in difficultys"
				@click="tagClick('difficulty',item.val )">{{item.label}}
			</div>
			<div class="search">
				<el-input placeholder="请输入关键字检索" suffix-icon="el-icon-search" v-model="searchStr"
					@keyup.enter.native="tagClick('searchStr',searchStr)">
				</el-input>
				</el-input>
			</div>
		</div>
		<div class="lesson-list" v-if="lessonList.length !=0">
			<div class="lesson-item" @click="goVideo('/VideoIntro', {lessonId: item.lessonId})" v-for="item in lessonList">
				<div class="lesson-img">
					<div class="lesson-tags">
						<div class="lesson-tag lesson-tag-search">信息检索</div>
						<div class="lesson-tag lesson-type-cost">公益</div>
					</div>
					<el-image style="width: 100%; height: 100%" :src="item.logoUrl" fit="cover">
						<div slot="error" class="image-slot">
							<img src="../assets/img/no_img.png" alt="" />
						</div>
					</el-image>
				</div>
				<div class="lesson-cont">
					<div class="lesson-title">{{item.lessonName}}</div>
					<div class="lesson-initro">
						<div class="lesson-types">
							<div class="types-items">实战</div>
							<div class="types-items">中级</div>
							<div class="types-items">
								<i class="el-icon-user-solid"></i>
								<span>{{item.likeNum}}</span>
							</div>
						</div>
						<div class="lesson-star">
							<el-rate v-model="item.commentNum"></el-rate>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="no-data" v-else>
			<el-empty description="暂无课程"></el-empty>
		</div>
		<div class="page-cont">
			<el-pagination :page-size="pageSize" :hide-on-single-page="true" background layout="prev, pager, next"
				:total="total" @current-change="pageNumChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		getLessonCategoryApi,
		getLessonListApi
	} from '@/api/Lesson'
	export default {
		data() {
			return {
				typeId: this.$route.query.id,
				activeTag: this.$route.query.id,
				tags: [{
					recId: '',
					tagName: '全部'
				}, {
					recId: 2481,
					tagName: '学习视频'
				}, {
					recId: 2482,
					tagName: '培训讲座'
				}, {
					recId: 2480,
					tagName: '直播课程'
				}],
				directions: [],
				difficultys: [{
					val: '',
					label: '全部'
				}, {
					val: '入门',
					label: '入门'
				}, {
					val: '初级',
					label: '初级'
				}, {
					val: '中级',
					label: '中级'
				}, {
					val: '高级',
					label: '高级'
				}],
				params: {
					tagId: '',
					searchStr: '',
					difficulty: '',
					orderby: ''
				},
				tagId: '',
				difficulty: '',
				pageSize: 10,
				pageNum: 1,
				total: 0,
				searchStr: '',
				orderby: '',
				lessonList: []
			}
		},
		created() {
			this.getDirection()
			this.getLessons()
		},
		methods: {
			getDirection() {
				getLessonCategoryApi({
					menuid: this.activeTag
				}).then(res => {
					let obj = [{
						dictLabel: '全部',
						dictValue: ''
					}]
					this.directions = [...obj, ...res.data]
				})
			},
			pageNumChange(index) {
				this.pageNum = index
				this.getLessons()
			},
			selectChange() {
				this.pageNum = 1
				this.getLessons()
			},
			getLessons() {
				let obj = {
					menuid: this.activeTag,
					tagId: this.tagId,
					difficulty: this.difficulty,
					searchStr: this.searchStr
				}
				getLessonListApi(obj).then(res => {
					this.lessonList = res.rows
					this.total = res.total
				})
			},
			getTag() {
				getLessonCategoryApi().then(res => {
					let obj = [{
						dictLabel: '全部',
						dictValue: ''
					}]
					this.tags = [...obj, ...res.data]
				})
			},
			goVideo(url, query) {
				this.$router.push({
					path: url,
					query: query
				})
			},
			tagClick(type, val) {
				if (type != 'searchStr') {
					this[type] = val
					this.pageNum = 1
					this.getLessons()
				}
				this.pageNum = 1
				this.getLessons()
			}
		},
		watch: {
			//监听路由地址的改变
			$route: {
				immediate: true,
				handler() {
					this.activeTag = this.$route.query.id
					this.pageNum = 1
					this.searchStr = ''
					this.getLessons()
				}
			}
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.lesson-content {
		// padding-top: 60px;
		width: @contWidth;
		margin: 0 auto;
		min-height: calc(100vh - 120px);

		.notice-types {
			display: flex;
			align-items: center;
			padding: 20px 26px 0;
			background: #F4F8FF;
			position: relative;
			// &::last-child() {
			// 	padding-bottom: 20px;
			// }
		}

		.last-types {
			padding-bottom: 20px;
			margin-bottom: 20px;
		}

		.types-item {
			margin-right: 50px;
			line-height: 30px;
			padding: 0 14px;
			cursor: pointer;
			color: #999;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.type-active {
			border-radius: 17px;
			background: #2360FE;
			line-height: 34px;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.lesson-form {
			display: flex;
			justify-content: space-between;
			padding: 20px 37px;
			background: #F4F8FF;
			margin-bottom: 26px;
		}

		.el-form-item {
			margin-bottom: 0;
		}

		.el-form-item__content {
			width: 150px;
		}

		.search {
			position: absolute;
			right: 20px;

			.el-input__inner {
				border-radius: 18px;
				width: 295px;
				height: 36px;
			}
		}

		.lesson-list {
			display: flex;
			flex-wrap: wrap;
		}

		.lesson-item {
			width: 244px;
			cursor: pointer;

			&:not(:nth-of-type(5n)) {
				margin-right: 15px;
			}

		}

		.lesson-img {
			position: relative;
			height: 145px;
			border-radius: 6px;
			overflow: hidden;
		}

		.lesson-tags {
			position: absolute;
			z-index: 99;
			top: 9px;
			left: 0;
			width: 100%;
			padding: 0 6px;
			display: flex;
			justify-content: flex-end;
		}

		.lesson-tag {
			padding: 2px 3px;
			margin: 0 2px;
			font-size: 9px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
		}

		.lesson-tag-search {
			background: #C8C8C8;
			color: #000;
		}

		.lesson-type-cost {
			color: #E02020;
			background: #FFA9A9;
		}

		.lesson-cont {
			padding: 13px 8px;
		}

		.lesson-title {
			width: 100%;
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			line-height: 18px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			margin-bottom: 12px;
		}

		.lesson-initro {
			display: flex;
			justify-content: space-between;
		}

		.lesson-types {
			display: flex;
			align-items: center;
		}

		.types-items {
			margin-right: 12px;
			display: flex;
			align-items: center;
			font-size: 11px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #999999;
		}

		.el-rate__icon {
			margin-right: 0px;
		}

		.page-cont {
			padding: 84px 0 110px;
			display: flex;
			justify-content: center;
		}

		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background-color: #2360FE;
		}
		.no-data{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200px;
		}
	}
</style>